<template>
    <div class="divnn">
        <div class="por">
            <div class="shouzhi anniu" v-if="items.service_url" @click="kefu">联系客服</div>
            <div class="shouzhi anniu" @click="gopage">我的订单</div>
        </div>
        <div class="leftboxs">
            <img class="logo" src="../../assets/logo.png" />
            <div class="xiangm">
                {{ items.describe }}
            </div>
            <!-- <img class="imgs" src="../../assets/img.png" /> -->
            <div class="boxx">
                <div class="flexss">
                    <div>
                        <img src="../../assets/img/1.png" alt="">
                        <div>专业软件</div>
                    </div>
                    <div>
                        <img src="../../assets/img/2.png" alt="">
                        <div>完全无毒</div>
                    </div>
                    <div>
                        <img src="../../assets/img/3.png" alt="">
                        <div>免费更新</div>
                    </div>
                </div>
                <div class="flexss">
                    <div>
                        <img src="../../assets/img/4.png" alt="">
                        <div>赠送课程</div>
                    </div>
                    <div>
                        <img src="../../assets/img/5.png" alt="">
                        <div>远程协助</div>
                    </div>
                    <div>
                        <img src="../../assets/img/6.png" alt="">
                        <div>永久使用</div>
                    </div>
                </div>
            </div>
            <div class="bigbox">
                <div class="content">
                    <div class="inputall">
                        <span>选择版本：</span>
                        <select id="basic-select" v-model="selectid">
                            <option v-for="option in options" :key="option.id" :value="option.id">
                                {{ option.type_name }}
                            </option>
                        </select>
                    </div>
                    <div class="inputall">
                        <span>手机号码：</span>
                        <input type="text" placeholder="输入手机号码" v-model="mobile">
                    </div>
                </div>
                <div class="jihuo">
                    <div @click="jihuo" class="shouzhi anniu">
                        立即激活
                    </div>
                </div>
            </div>
            <div class="tishi">
                *手机号码作为用户激活的凭证
            </div>
            <img class="logo2" src="../../assets/logo2.png" />
        </div>

        <div class="alertss" v-if="massegs">{{ massegs }}</div>

    </div>
</template>
<script>
import axios from 'axios';
// 接收消息的组件
import { EventBus } from '../event-bus.js'
export default {
    name: "indexS",
    data() {
        return {
            massegs: "",
            mobile: "",
            selectid: '',
            options: [
            ],
            items: {
                service_url: ""
            },
            is_use_discount: 0,
            url: "http://hj.xiaoyutongxue.com",
        };
    }, computed: {
    },
    components: {},
    created() {
        if (localStorage.getItem("mobile")) {
            this.mobile = localStorage.getItem("mobile")
        } else {
            this.mobile = ""
        }
        localStorage.removeItem("dingdan")
        EventBus.$on('closewin', data => {
            let datas = JSON.parse(data)
            if (Number(datas.discount_money) > 0) {
                this.is_use_discount = 1
                localStorage.setItem("duibi", localStorage.getItem("mobile"))
            } else {
                this.is_use_discount = 0
            }

        })
        this.getxinxi()
        this.getlist()
    },
    methods: {
        async kefu() {
            const { ipcRenderer } = require('electron')
            await ipcRenderer.invoke('open-external-link', this.items.service_url)
        },
        gopage() {


            this.$router.push({
                path: '/orderlist'
            })
        },
        isStrictMobilePhone(phone) {
            // 更严格的手机号验证
            const reg = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
            return reg.test(phone.replace(/\s+/g, ''));
        },
        jihuo() {
            if (this.mobile == "") {
                // alert("请输入手机号码")
                this.massegs = "请输入手机号码"
                setTimeout(() => {
                    this.massegs = ""
                }, 2000);
                return
            }
            if (!this.isStrictMobilePhone(this.mobile)) {
                // alert("请输入正确的手机号码")
                this.massegs = "请输入正确的手机号码"
                setTimeout(() => {
                    this.massegs = ""
                }, 2000);
                return
            }
            axios.get(this.url + "/api/index/create_order?mobile=" + this.mobile + '&id=' + this.selectid + '&is_use_discount=' + this.is_use_discount)
                .then(response => {
                    localStorage.setItem('mobile', this.mobile)
                    localStorage.setItem("dingdan", JSON.stringify(response.data.data))
                    if (response.data.data.is_show_order == 1) {
                        EventBus.$emit('haspayorder', true)
                        setTimeout(() => {
                            this.$router.push({
                                path: '/orderlist',
                            })
                        }, 10);
                    } else {
                        this.$router.push({
                            path: '/payorder',
                            query: { datas: JSON.stringify(response.data.data), mobile: this.mobile }
                        })
                    }

                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        getlist() {
            axios.get(this.url + '/api/index/get_type_list?type_id=' + 1)
                .then(response => {
                    console.log(response.data.data.list);
                    this.options = response.data.data.list
                    this.selectid = this.options[0].id
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        getxinxi() {
            axios.get(this.url + '/api/index/get_info?type_id=' + 1)
                .then(response => {
                    console.log(response.data);
                    this.items = response.data.data
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
    },
};
</script>
<style  scoped>
.alertss {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.boxx {
    margin-top: 50px;
    margin-bottom: 20px;
}

.flexss {
    display: flex;
    margin-top: 20px;
}

.flexss>div {
    flex: 1;
    line-height: 45px;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.flexss>div img {
    width: 45px;
    height: 45px;
    display: block;
    height: auto;
}

.flexss>div div {
    font-size: 18px;
    margin-left: 10px;
}

.logo2 {
    height: 50px;
    display: block;
    margin-top: 50px;
    position: absolute;
    bottom: 30px;
}

.tishi {
    color: red;
    text-align: left;
    padding-left: 80px;
}

.bigbox {
    display: flex;
}

.bigbox .content {
    flex: 5;
}

.bigbox .jihuo {
    flex: 1;
}

.jihuo div {
    width: 120px;
    height: 50px;
    background: rgb(35, 142, 250);
    color: white;
    line-height: 50px;
    border-radius: 5px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.content {
    margin-top: 20px;
}

.inputall {
    height: 40px;
    margin: 10px 0;
}

.inputall span {
    float: left;
    font-weight: bold;
    line-height: 35px;
}

.inputall select {
    float: left;
    width: 220px;
    height: 35px;
    box-sizing: border-box;
    border: solid 1px rgb(202, 202, 202);
    padding-left: 10px;
    background: rgba(0, 0, 0, 0);
}

.inputall input {
    float: left;
    padding-left: 10px;
    width: 220px;
    border: solid 1px rgb(202, 202, 202);
    box-sizing: border-box;
    height: 35px;
}

.imgs {
    margin-top: 40px;
    display: block;
    width: 100%;
}

.xiangm {
    clear: both;
    text-align: left;
    font-weight: bold;
    color: black;
    padding-top: 50px;
}

.leftboxs {
    padding: 30px;
    background: linear-gradient(to right,
            rgba(248, 248, 248, 1) 0%,
            /* 0% 位置完全不透明 */
            rgba(248, 248, 248, 0.75) 25%,
            /* 25% 位置 75% 不透明 */
            rgba(248, 248, 248, 1) 50%,
            /* 50% 位置 50% 不透明 */
            rgba(248, 248, 248, 1) 75%,
            /* 75% 位置 25% 不透明 */
            rgba(248, 248, 248, 0) 100%
            /* 100% 位置完全透明 */
        );
    width: 70%;
    height: 100vh;
    padding-right: 20%;
    box-sizing: border-box;
}

.logo {
    width: 400px;
    display: block;
}

.por {
    position: fixed;
    right: 40px;
    top: 30px;
    display: flex;
}

.por div {
    width: 120px;
    height: 50px;
    background: rgb(35, 142, 250);
    color: white;
    line-height: 50px;
    border-radius: 5px;
    margin: 0 5px;
}

.divnn {
    min-height: 100vh;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: url("http://hj.xiaoyutongxue.com/static/images/bk.png");
    background-size: cover;
    background-position: center;
}
</style>